<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
    }
    
    .column-left {
      float: left;
      width: 30%;
    }
    
    .column-right {
      float: left;
      width: 70%;
      overflow: auto;
      /* расшириться вниз захватить float'ы */
    }
    
    .footer {
      clear: both;
    }
    
    .inner {
      margin: 1em;
    }
  </style>
</head>

<body>

  <div style="background:yellow">Шапка</div>

  <div class="column-left" style="background:#aef">
    <div class="inner">
      <!-- див для отступа внутри ширины родителя -->
      <h3>Персонажи:</h3>
      <ul>
        <li>Винни-Пух</li>
        <li>Ослик Иа</li>
        <li>Сова</li>
        <li>Кролик</li>
      </ul>
    </div>
  </div>

  <div class="column-right" style="background:tan">
    <div class="inner">
      <h3>Винни-Пух</h3>

      <img src="https://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">

      <p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>

      <p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>

    </div>
  </div>

  <div class="footer" style="background:yellow">Низ</div>



</body>

</html>